<!DOCTYPE html>
<html lang="zh">

<head>
    <title>CrossRun|谁与我大梦一场</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="./js/headfoot.js"></script>
    <script type="text/javascript" src="./js/paging.js"></script>
    <link href="./css/nav.css" rel="stylesheet" type="text/css" />
    <link href="./css/style.css" rel="stylesheet" />
    <link href="./css/paging.css" rel="stylesheet" />
    <link rel="stylesheet" href="./css/editormd.preview.css" />
    <style>

        #layout > header, .btns {
                width: auto;
            }
            
            #sidebar {
                width: 450px;
                height: 100%;
                position: fixed;
                top: 0;
                right: 0;
                overflow: hidden;
                background: #fff;
                z-index: 100;
                padding: 18px; 
                border: 1px solid #ddd;
                border-top: none;
                border-bottom: none;
            }
            
            #sidebar:hover {
                overflow: auto;
            }
            
            #sidebar h1 {
                font-size: 16px;
            }
            
            #custom-toc-container {
                padding-left: 0;
            }
            
            #test-editormd-view, #test-editormd-view2 {
                padding-left: 0;                
                margin: 0;
            }
        </style>
</head>

<body class="body_container">
    <div id="header">
        <script>   writhHead();   </script>
    </div>
    <div id="layout">
        <header>
            <h1 id="title"></h1>
            <p id="time_create"></p>
            <p id="time_modify"></p>
        </header>
        <!-- <div class="btns">
            <button onclick="location.href='./html-preview-markdown-to-html.html';">返回 Back</button>
        </div> -->
        <div id="sidebar" style="display:none;">
            <h1>目录</h1>
            <div class="markdown-body editormd-preview-container" id="custom-toc-container">#custom-toc-container</div>
        </div>
        <div id="test-editormd-view">
            <textarea style="display:none;" name="test-editormd-markdown-doc"></textarea>
        </div>
    </div>
    <!-- <script src="js/zepto.min.js"></script>
		<script>		
			var jQuery = Zepto;  // 为了避免修改flowChart.js和sequence-diagram.js的源码，所以使用Zepto.js时想支持flowChart/sequenceDiagram就得加上这一句
		</script> -->
    <script src="../lib/marked.min.js"></script>
    <script src="../lib/prettify.min.js"></script>

    <script src="../lib/raphael.min.js"></script>
    <script src="../lib/underscore.min.js"></script>
    <script src="../lib/sequence-diagram.min.js"></script>
    <script src="../lib/flowchart.min.js"></script>
    <script src="../lib/jquery.flowchart.min.js"></script>

    <script src="../editormd.js"></script>
    <script type="text/javascript">
        function GetQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]); return null;
        }
        $(function () {
            var testEditormdView, testEditormdView2;

            var json = {
                "id": GetQueryString('p')
            };
            $.ajax({
                contentType: 'application/json',
                type: 'POST',
                url: "./api/blog/blog",
                dataType: "json",
                data: JSON.stringify(json),
                success: function (result) {
                    testEditormdView = editormd.markdownToHTML("test-editormd-view", {
                        markdown: result.Res.content,//+ "\r\n" + $("#append-test").text(),
                        //htmlDecode      : true,       // 开启 HTML 标签解析，为了安全性，默认不开启
                        htmlDecode: "style,script,iframe",  // you can filter tags decode
                        //toc             : false,
                        tocm: true,    // Using [TOCM]
                        tocContainer: "#custom-toc-container", // 自定义 ToC 容器层
                        //gfm             : false,
                        //tocDropdown     : true,
                        // markdownSourceCode : true, // 是否保留 Markdown 源码，即是否删除保存源码的 Textarea 标签
                        emoji: false,
                        taskList: true,
                        tex: true,  // 默认不解析
                        flowChart: true,  // 默认不解析
                        sequenceDiagram: true,  // 默认不解析                       
                    });
                    $("#title").text(result.Res.title);
                    $("#time_create").html("创建时间：" + formatDateTime(result.Res.time));
                    $("#time_modify").html("修改时间：" + formatDateTime(result.Res.modify));
                }
            })

            //console.log("返回一个 jQuery 实例 =>", testEditormdView);

            // 获取Markdown源码
            //console.log(testEditormdView.getMarkdown());

            //alert(testEditormdView.getMarkdown());            
        });
    </script>
</body>

</html>